<div class="header flex ">
    <img src="assets/images/arrow-left-white.png" alt="" class="header_img">
    <div class="header_cut"></div>
    <div class="header_title">多模提取</div>
    <div class="header_v">V1.0.2</div>
    <div class="header_tabs">
        <div class="header_tab">应用总览</div>
        <div class="header_tab nochoose">应用资产</div>
        <div class="header_tab nochoose">应用监控</div>
    </div>
</div>
<div class="main">
    <div class="multimode">
        <div class="mu_title">
            <div class="mu_title_text">多模提取</div>
            <div class="mu_title_button">修改</div>
        </div>
        <div class="mu_module">
            <div class="mu_module_left">
                <div class="mu_module_left_title">应用负责人</div>
                <div class="mu_module_left_data">张三</div>
            </div>
            <div class="mu_module_right">
                <div class="mu_module_right_title">所属行业</div>
                <div class="mu_module_right_data">——</div>
            </div>
        </div>
        <div class="mu_module">
            <div class="mu_module_left">
                <div class="mu_module_left_title">工作流</div>
                <div class="mu_module_left_data">多模提取工作流</div>
            </div>
            <div class="mu_module_right">
                <div class="mu_module_right_title">数据处理资源</div>
                <div class="mu_module_right_data">专属资源池</div>
                <div class="mu_module_right_data1">专属1</div>
                <div class="mu_module_right_data1">规格1</div>
            </div>
        </div>
        <div class="mu_module">
            <div class="mu_module_left">
                <div class="mu_module_left_title">模型训练资源</div>
                <img src="assets/images/icon-add.png" alt="" class="warn_img">
                <div class="mu_module_left_data" style="color: #fa9841;">您的模型训练资源还剩3天到期</div>
            </div>
            <div class="mu_module_right">
                <div class="mu_module_right_title">部署方式</div>
                <div class="mu_module_right_data">在线部署</div>
            </div>
        </div>
        <div class="mu_module">
            <div class="mu_module_left">
                <div class="mu_module_left_title">描述</div>
                <div class="mu_module_left_data">应用描述阿斯达伟大伟大伟大达瓦达瓦达瓦大达瓦达瓦达瓦达瓦达瓦达瓦低洼地</div>
            </div>
        </div>
    </div>
    <div class="version">
        <div class="v_title">
            <div class="v_title_left">开发版本列表</div>
            <div class="v_title_right">
                <div class="v_title_note">您还可以开发6个版本</div>

                <div class="v_title_button">开发新版本</div>
            </div>
        </div>
        <div class="v_table" style="margin-bottom: 20px;">
            <nz-table #basicTable [nzData]="listOfData" [nzSize]="'middle'" class="table" [nzShowTotal]="totalTemplate" [nzShowPagination]="'false'">
                <thead>
                    <tr class="thead_font">
                        <th nzWidth="1%"></th>
                        <th nzWidth="14%">版本名称</th>
                        <th nzWidth="29%">进展</th>
                        <th nzWidth="10%">模型准确率</th>
                        <th nzWidth="10%">模型召回率</th>
                        <th nzWidth="8%">F1值</th>
                        <th nzWidth="19%">更新时间</th>
                        <th nzWidth="9%">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of basicTable.data" class="tbody_font">
                        <td></td>
                        <td>{{ data.version_name }}</td>
                        <td>
                            <div class="progress_item">
                                <div class="pro_text">
                                    <div>模板配置</div>
                                    <div>数据集配置</div>
                                    <div style="margin-right: 20px;">模型训练</div>
                                    <div style="margin-right: 20px;">模型评估</div>
                                    <div>模型部署</div>
                                </div>
                                <div class="pro_img">
                                    <div class="pro_ok" style="margin-left: 18px;"><img src="assets/images/check.png" alt="" style="width: 13px;height: 13px;"></div>
                                    <div class="heng"></div>
                                    <div class="pro_ok"><img src="assets/images/check.png" alt="" style="width: 13px;height: 13px;"></div>
                                    <div class="heng"></div>
                                    <div class="pro_ok"><img src="assets/images/check.png" alt="" style="width: 13px;height: 13px;"></div>
                                    <div class="heng"></div>
                                    <div class="pro_ok" *ngIf="data.progress > 4"><img src="assets/images/white_check.svg" alt="" style="width: 13px;height: 13px;"></div>
                                    <div class="pro_ok" style=" background-color: #f66f6a;;" *ngIf="data.progress < 4"><img src="assets/images/tanhao.svg" alt="" style="width: 13px;height: 13px;"></div>
                                    <div class="heng"></div>
                                    <div class="pro_ok" *ngIf="data.progress > 4"><img src="assets/images/check.png" alt="" style="width: 13px;height: 13px;"></div>
                                    <div class="pro_ok" style="background-color:gray ;" *ngIf="data.progress < 4"><img src="assets/images/ellipsis.svg" alt="" style="width: 13px;height: 13px;"></div>

                                </div>
                            </div>

                        </td>
                        <td>{{ data.precise }}</td>
                        <td>{{ data.recall }}</td>
                        <td>{{ data.F1 }}</td>
                        <td>{{ data.update }}</td>
                        <td>

                            <a class="a_font">查看</a>
                            <nz-divider nzType="vertical"></nz-divider>
                            <a class="a_font">删除</a>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
        <!-- 下部分页模块 -->
        <div class="Pagination">
            <nz-select ngModel="1" class="p_select">
                <nz-option nzValue="1" nzLabel="1"></nz-option>
                <nz-option nzValue="2" nzLabel="2"></nz-option>
                <nz-option nzValue="3" nzLabel="3" nzDisabled></nz-option>
            </nz-select>
            <nz-pagination [(nzPageIndex)]="current" [nzTotal]="4" [nzSize]="'small'" [nzPageSize]="8" [nzShowTotal]="totalTemplate"></nz-pagination>
            <ng-template #totalTemplate let-total>总条数：{{ total }}</ng-template>
        </div>

    </div>
</div>